<template>
  <van-row>
    <van-row>
      <van-cell is-link title="组件介绍" to="/views/swiper/vue-awesome-swiper/index" />
    </van-row>
    <!-- 轮播图区域 -->
    <swiper
      :key="swiperOptions.loop"
      :options="swiperOptions"
      @slideChangeTransitionStart="slideChangeStart()"
      class="mainSwiper"
      ref="mySwiper"
    >
      <swiper-slide :key="item.title" class="swiperContent" v-for="item in myDataList">
        <van-row class="title">
          <van-col span="24">
            <span>{{item.title}}</span>
          </van-col>
        </van-row>
        <van-row class="content">
          <!-- 文字区域 -->
          <van-col span="24" v-if="item.content!= ''">
            <span>{{item.content}}</span>
          </van-col>
          <!-- 图片区域  -->
          <van-col span="24" v-if="item.imgPath!= undefined && item.imgPath!= ''">
            <van-image :src="item.imgPath" height="8rem" width="8rem"></van-image>
          </van-col>
        </van-row>
        <van-row class="footer">
          <van-col span="24">{{item.footer}}</van-col>
        </van-row>
      </swiper-slide>
    </swiper>
    <van-field
      :label="currentLabelText"
      :placeholder="currentPlaceholderText"
      v-model="currentInput"
      v-show="showInput"
    >
      <template #button>
        <van-button @click="submit" size="small" type="primary">确定</van-button>
      </template>
    </van-field>
    <van-row>
      <van-cell title="功能演示">
        <template #right-icon>
          <van-icon name="down" />
        </template>
      </van-cell>
    </van-row>
    <!-- 轮播图操作按钮区域 -->
    <van-grid :column-num="4">
      <van-grid-item
        :icon="item.icon"
        :key="item.title"
        :text="item.title"
        @click="swiperFunction(item.functionName)"
        v-for="item in functionList"
      />
    </van-grid>
  </van-row>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

export default {
  name: "vueAwesomeSwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      showInput: false,
      swiper: "", //轮播图实例
      swiperOptions: {
        //轮播图配置项
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        speed: 100,
        grabCursor: true,
        direction: "horizontal",
        autoHeight: true,
        // loop: true,
        // lazy: true,
        // virtual: true,

        observer: true,
      },
      currentLabelText: "", // 输入框标题
      currentInput: "", // 输入框内容
      currentPlaceholderText: "", //输入框提示信息
      myDataList: [
        // 轮播图内容数据
        {
          title: "轮播图标题",
          content:
            "内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，内容比较多，",
          footer: "我是底部",
        },
        {
          title: "轮播图标题2",
          content:
            "内容比较少，内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少内容比较少",
          footer: "我是底部",
        },
        {
          title: "轮播图标题3",
          content: "",
          imgPath: require("../../../assets/swiper/swiper1.jpg"),
          footer: "我是底部3",
        },
      ],
      functionList: [
        {
          title: "阻止左滑",
          functionName: "noSwiperLeft",
          desc: "阻止当前页向左滑动",
          icon: "arrow-left",
        },
        {
          title: "阻止右滑",
          functionName: "noSwiperRight",
          desc: "阻止当前页向右滑动",
          icon: "arrow",
        },
        {
          title: "上一页",
          functionName: "goPrePage",
          desc: "向上滑动",
          icon: "arrow-left",
        },
        {
          title: "下一页",
          functionName: "goNextPage",
          desc: "向下滑动",
          icon: "arrow",
        },
        {
          title: "循环滑动",
          functionName: "goLoopPage",
          desc: "循环滑动",
          icon: "circle",
        },
        {
          title: "预显个数",
          functionName: "showPreView",
          desc: "调整单次轮播图显示的个数",
          icon: "exchange",
        },
      ],
    };
  },
  mounted() {
    this.swiper = this.$refs.mySwiper.$swiper;
    console.log(this.swiper);
  },
  methods: {
    submit() {
      switch (this.currentLabelText) {
        case "显示个数": {
          //修改显示个数
          this.swiper.params.slidesPerView = this.currentInput;
          break;
        }
      }
      this.$nextTick(() => {
        this.showInput = false;
        this.currentLabelText = "";
        this.currentPlaceholderText = "";
        this.currentInput = "";
      });
    },
    slideChangeStart() {
      // 获取当前轮播图序号
      let index = this.swiper.activeIndex;
      this.$toast.success("当前轮播图序号:" + index);
    },
    swiperFunction(fName) {
      switch (fName) {
        case "noSwiperLeft": {
          this.noSwiperLeft();
          break;
        }
        case "noSwiperRight": {
          this.noSwiperRight();
          break;
        }
        case "noSwiper": {
          this.noSwiper();
          break;
        }
        case "goNextPage": {
          this.goNextPage();
          break;
        }
        case "goPrePage": {
          this.goPrePage();
          break;
        }
        case "goLoopPage": {
          this.goLoopPage();
          break;
        }
        case "showPreView": {
          this.showPreViewBefore();
          break;
        }
      }
    },
    /**
     * 阻止左滑，阻止向下一页
     */
    noSwiperLeft() {
      if (this.swiper.allowSlideNext) {
        this.swiper.allowSlideNext = false;
        this.$toast.fail("NoSwiperLeft");
      } else {
        this.swiper.allowSlideNext = true;
        this.$toast.success("SwiperLeft");
      }
    },
    /**
     * 阻止右滑，阻止向上一页
     */
    noSwiperRight() {
      if (this.swiper.allowSlidePrev) {
        this.swiper.allowSlidePrev = false; //禁止右滑
        this.$toast.fail("NoSwiperRight");
      } else {
        this.swiper.allowSlidePrev = true;
        this.$toast.success("SwiperRight");
      }
    },
    /**
     * 跳转至下一页
     */
    goNextPage() {
      if (!this.swiper.allowSlideNext) {
        this.$toast.fail("NoSlideNext");
        return;
      }
      this.swiper.slideNext();
    },
    /**
     * 跳转至上一页
     */
    goPrePage() {
      if (!this.swiper.allowSlidePrev) {
        this.$toast.fail("NoSlidePrev");
        return;
      }
      this.swiper.slidePrev();
    },
    /**
     * 循环滑动
     */
    goLoopPage() {
      if (this.swiperOptions.loop == undefined || !this.swiperOptions.loop) {
        this.$toast.success("loop");
        // 在swiper标签上使用:key来销毁和重构轮播图实力
        this.$set(this.swiperOptions, "loop", true);
      } else {
        this.$toast.fail("unLoop");
        // 在swiper标签上使用:key来销毁和重构轮播图实力
        this.$set(this.swiperOptions, "loop", false);
      }
      // 在轮播图再次构造之后重新获取其实例，否则this.swiper是之前的实例，已经被销毁
      this.$nextTick(() => {
        this.swiper = this.$refs.mySwiper.$swiper;
      });
    },
    showPreViewBefore() {
      this.showInput = true;
      this.currentLabelText = "显示个数";
      this.currentPlaceholderText = "请输入显示个数";
    },
  },
};
</script>

<style lang="less" scoped>
@swiperinnerheight: 1rem;
.mainSwiper {
  .swiperContent {
    background-color: #e5e5e5;
    .title {
      background-image: linear-gradient(to right, red, yellow);
      text-align: center;
      height: @swiperinnerheight * 1.2;
    }
    .content {
      background-color: #1bbc9b;
      color: #fff;
      max-height: @swiperinnerheight * 5;
      overflow-y: scroll;
    }
    .footer {
      background-image: linear-gradient(to right, #35d6b6, #19b5fe);
      height: @swiperinnerheight * 1.2;
      text-align: center;
    }
  }
}
</style> 